<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-15 14:19:41
 * @LastEditTime: 2020-07-06 17:32:51
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\dispersionPracticeApply\dispersionPracticeDetails.vue
 * @Description: 分散实习申请详情
 -->
<template>
    <div class="disDetails">
        <div class="disDetails_details">
            <h2>{{$t('dispersionPracticeApply.title.pageTitle')}}</h2>
            <wordTable :label="label" :data="data" />
            <div class="disDetails_details_cancel">
                <el-button @click="cancel">{{$t('message.close')}}</el-button>
            </div>
        </div>
        <div class="disDetails_audit" v-if="data.status!=='DRAFT'">
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title"> {{$t('classroomTitle.approvalProgress')}} </template>
                    <el-table :data="data1">
                        <el-table-column align="center" width="55" type="index" :label="$t('message.order')"/>
                        <el-table-column v-for="(item, idx) in label1" :min-width="item.width" :key="idx" :label="item.label" :prop="item.props" align="center" />
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
import wordTable from '../common/wordTable';
import { getDetail } from 'common/src/api/practiceManagement/dispersionPracticeApply';
export default {
    // 组件名称
    name: 'DispersionPracticeDetails',
    // 局部注册的组件
    components: {
        wordTable
    },
    // 组件参数 接收来自父组件的数据
    props: {
        ids: {
            type: String,
            default: ''
        }
    },
    // 组件状态值
    data() {
        return {
            label: [
                [{ label: this.$t('label.stuCode'), props: 'studentNo' }, { label: this.$t('label.stuName'), props: 'studentName' }],
                [{ label: this.$t('label.grade'), props: 'grade' }, { label: this.$t('dispersionPracticeApply.label.practiceDateStart'), props: 'practiceDateStart' }],
                [{ label: this.$t('dispersionPracticeApply.label.practiceDateEnd'), props: 'practiceDateEnd' }, { label: this.$t('dispersionPracticeApply.label.practiceAddr'), props: 'practiceAddr' }],
                [{ label: this.$t('dispersionPracticeApply.label.practiceEnterprise'), props: 'practiceEnterprise' }, { label: this.$t('dispersionPracticeApply.label.enterpriseContactUser'), props: 'enterpriseContactUser' }],
                [{ label: this.$t('dispersionPracticeApply.label.position'), props: 'position' }, { label: this.$t('dispersionPracticeApply.label.enterpriseContactPhone'), props: 'enterpriseContactPhone' }],
                [{ label: this.$t('dispersionPracticeApply.label.practicePlan'), props: 'practicePlan' }],
                [{ label: this.$t('dispersionPracticeApply.label.attachName'), props: 'attachName', type: 'file' }]
            ],
            data1: [],
            label1: [
                { label: this.$t('paperBlindTrial.tiemName'), props: 'times', width: 200 },
                { label: this.$t('achievementApply.approvorName'), props: 'approvorName', width: 100 },
                { label: this.$t('academicApply.role'), props: 'role', width: 80 },
                { label: this.$t('message.operating'), props: 'name', width: 100 },
                { label: this.$t('achievementApply.explanation'), props: 'content', width: 250 }
            ]
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
     * 在实例初始化之后，组件属性计算之前，如data属性等
     */
    created() { },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
     */
    mounted() {
        this.getDetails();
    },
    // 组件方法
    methods: {
        getDetails() {
            getDetail({ id: this.ids }).then(res => {
                this.data = res.data;
                if (this.data.udgPtAttachTs && this.data.udgPtAttachTs.length > 0) {
                    this.$set(this.data, 'attachName', this.data.udgPtAttachTs[0].attachName);
                    this.$set(this.data, 'attachPath', this.data.udgPtAttachTs[0].attachPath);
                }
            });
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style lang="scss" scoped>
.disDetails {
    &_details {
        padding: 20px;
        background-color: #fff;
        &_cancel {
            display: flex;
            flex-direction: row-reverse;
            margin-top: 10px;
        }
    }
    &_audit {
        padding: 20px;
        margin-top: 20px;
        background-color: #fff;
    }
}
</style>
